/*
 * @Author: zhangzhen
 * @Date: 2022-07-21 14:05:11
 * @LastEditors: zhangzhen
 * @LastEditTime: 2022-12-16 16:29:41
 *
 */

import React, { useState } from 'react'
import { useAppDispatch, useAppSelector } from '@/redux/hook'
import { setConfigs, setIconArr } from '@/redux/slice'
import styles from './index.module.scss'
import { Row, Col, Select, Popover, Slider } from 'antd'
import { shallowEqual } from 'react-redux'
import { SketchPicker } from 'react-color'
import IconEdit from './iconEdit'

const { Option } = Select

const DrawPage = () => {
  const { configs } = useAppSelector(({ state }) => ({ ...state }), shallowEqual)
  const { searchValue, searchWebName, timeColor, dateColor, dateSize } = configs
  const dispatch = useAppDispatch()

  return (
    <div className={styles.drawBox}>
      <Row gutter={[0, 12]}>
        <Col span={24}>
          <div className={styles.drawBoxItem}>
            <div className={styles.drawBoxItemName}>搜索引擎:</div>
            <Select
              placement="bottomRight"
              getPopupContainer={(triggerNode) => {
                return triggerNode.parentNode
              }}
              dropdownStyle={{ color: 'red', left: '80px' }}
              style={{ width: 80 }}
              defaultValue={searchValue}
              onChange={(value) => {
                const newConfig = { ...configs }
                newConfig.searchValue = value
                dispatch(setConfigs(newConfig))
              }}
            >
              {searchWebName.map((item: { value: string; text: string }) => {
                return (
                  <Option key={item.value} value={item.value}>
                    {item.text}
                  </Option>
                )
              })}
            </Select>
          </div>
        </Col>
        {/* <Col span={24}>
          <div className={styles.drawBoxItem}>
            <div className={styles.drawBoxItemName}>时间大小</div>
          </div>
        </Col> */}
        <Col span={24}>
          <div className={styles.drawBoxItem}>
            <div className={styles.drawBoxItemName}>时间颜色</div>
            <Popover
              trigger="click"
              overlayClassName={styles.reactColor}
              content={
                <SketchPicker
                  color={dateColor}
                  onChange={(color: { hex: string }) => {
                    const newConfig = { ...configs }
                    newConfig.timeColor = color.hex
                    dispatch(setConfigs(newConfig))
                  }}
                />
              }
            >
              <div className={styles.drawBoxColor} style={{ background: timeColor }} />
            </Popover>
          </div>
        </Col>
        <Col span={24}>
          <div className={styles.drawBoxItem}>
            <span className={styles.drawBoxItemName}>日期大小</span>
            <div className={styles.drawBoxSlider}>
              <Slider
                defaultValue={Number(dateSize.substring(0, 2))}
                max={50}
                onChange={(value) => {
                  const newConfig = { ...configs }
                  newConfig.dateSize = value + 'px'
                  dispatch(setConfigs(newConfig))
                }}
              />
            </div>
          </div>
        </Col>
        <Col span={24}>
          <div className={styles.drawBoxItem}>
            <div className={styles.drawBoxItemName}>日期颜色</div>
            <Popover
              overlayClassName={styles.reactColor}
              trigger="click"
              content={
                <SketchPicker
                  color={dateColor}
                  onChange={(color: { hex: string }) => {
                    const newConfig = { ...configs }
                    newConfig.dateColor = color.hex
                    dispatch(setConfigs(newConfig))
                  }}
                />
              }
            >
              <div className={styles.drawBoxColor} style={{ background: dateColor }} />
            </Popover>
          </div>
        </Col>
        <Col span={24}>
          <IconEdit />
        </Col>
      </Row>
    </div>
  )
}

export default DrawPage
